<template>
  <view>
    <u-navbar title="巡检项详情" :background="{ backgroundColor:'#9CE0FF'}" :border-bottom="false" title-color="#000" title-size="37" />
    <view class="mt-20">
      <sub-title class="mt-20" title="设备信息"></sub-title>
    </view>
    <view class="p-lr-40 mb-20">
      <view class="fz-30 lh-42 color-888888 mt-20 flex justify-between">
        <text class="w-200">设备名称</text>
        <view class="flex1 text-right">
          <text>{{ deviceInfo.name || '-'}}</text>
        </view>
      </view>
      <view class="fz-30 lh-42 color-888888 mt-20 flex justify-between">
        <text class="w-200">设备编号</text>
        <view class="flex1 text-right">
          <text>{{ deviceInfo.deviceNo || '-'}}</text>
        </view>
      </view>
      <view class="fz-30 lh-42 color-888888 mt-20 flex justify-between">
        <text class="w-200">设备类型</text>
        <view class="flex1 text-right">
          <text>{{ deviceInfo.categoryName || '-'}}</text>
        </view>
      </view>
    </view>
    <sub-title title="巡检详情"></sub-title>
    <view v-for="(item, index) in planDeviceStandardDetailList" :key="index">
      <view class="p-lr-40 mb-20">
        <view class="mt-20 mb-10 fz-32 lh-45 flex align-center">
          <text class="flex1 color-888888 mr-20">{{ item.name }}</text>
          <view v-if="item.type === '1' " class="flex flex-wrap justify-end flex2">
            <view class="resultArrayItem break-all">
              <text
                  v-for="(resultArrayItem, resultArrayIndex) in item.resultArray"
                  :key="resultArrayIndex"
                  :class="[item.normal.split(',').includes(resultArrayItem) ?'color-19BE6B':'color-FF6262']"
              >
                {{resultArrayItem}}
              </text>
              <text class="color-FF6262" v-if="!item.resultArray">-</text>
            </view>
          </view>
          <text
              v-else
              class="flex1 text-right"
              :class="[item.status === '0' ?'color-19BE6B':'color-FF6262']"
          >
            {{standardListItemValue(item)}}
          </text>
        </view>
        <view v-if="item.isTakePhoto">
          <view class="flex flex-wrap" v-if="item.images && item.images.length">
            <view class="w-150 h-150 bg-CCCCCC mr-30 mb-10" v-for="(imagesItem,imagesIndex) in item.images" :key="imagesIndex">
              <image class="w-150 h-150 mr-30 mb-10" :src="imagesItem.url" @tap="previewImage(item.images, imagesIndex)"></image>
            </view>
          </view>
          <view v-else  class="w-150 h-150 bg-CCCCCC flex flex-column align-center justify-center">
            <image class="w-47 h-40" src="@/static/images/common/empty.png"></image>
            <text class="color-fff fz-24 lh-33 mt-10">暂无图片</text>
          </view>
        </view>
      </view>
      <view class="flex justify-end" v-if="item.status === '1' && handleBtnShow">
        <view class="h-60 bg-FF9900 br-5 text-center lh-60 fz-28 color-fff p-lr-10 mr-40 mt-20 flex align-center" @tap="toHandleError(item)">
          <text>处理异常</text>
          <view class="h-34 color-FF6262 br-17 p-lr-10 bg-fff fz-24 lh-34 text-center pt-2 ml-14" v-if="item.abnormalCount && item.abnormalCount > 1">
            <text>{{ item.abnormalCount > 99 ? '99+' : item.abnormalCount}} </text>
          </view>
        </view>
      </view>
    </view>

    <!--异常提示模态框-->
    <u-modal border-radius="20" :show-confirm-button="false" :show-title="false" mask-close-able v-model="isModalShow">
      <view class="h-150 flex align-center justify-center fz-30 font-bold color-333333">
        <image class="mr-20 w-38 h-38" src="@/static/images/mine/error.png"></image>
        <text>{{modalContent}}</text>
      </view>
    </u-modal>
  </view>
</template>

<script>
import SubTitle from "@/components/SubTitle/SubTitle";
import {planDeviceStandardDetail} from "@/api/inspection/planDevice";
import {device} from "@/api/hospital/device";
export default {
  name: "check-item-detail",
  components: {SubTitle},
  data(){
    return {
      deviceId:'',
      workOrderId:'',
      workOrderDeviceId:'',
      deviceInfo:{},
      planDeviceStandardDetailList:[],
      handleBtnShow: false,
      fromCheckedHistory: 0,
      isModalShow: false,
      modalContent: '',
    }
  },
  onLoad(options){
    this.workOrderId = options.workOrderId
    this.deviceId = options.deviceId
    this.workOrderDeviceId = options.workOrderDeviceId
    this.fromCheckedHistory = options?.fromCheckedHistory || 0
  },
  onShow(){
    this.doQuery()
  },
  created(){
    //驻场经理 管理员能看到并点击处理异常
    let isManagerOrAdmin = this.$auth.hasRoleOr(['manager','admin','co-admin'])
    this.handleBtnShow = isManagerOrAdmin
  },
  methods:{
    doQuery(){
      planDeviceStandardDetail({workOrderDeviceId:this.workOrderDeviceId,workOrderId:this.workOrderId}).then(res => {
        //根据标准ID升序排序
        // res.data.sort((pre, next) => {
        //   return pre.standardId - next.standardId
        // })
        res.data.forEach(standardListItem => {
          if(standardListItem.type === '1' && standardListItem.result){
            standardListItem.resultArray = standardListItem.result.split(',')
          }
        })
        this.planDeviceStandardDetailList = res.data
      })
      device(this.deviceId).then(res => {
        this.deviceInfo = res.data
      })
    },
    toHandleError(item){
      if(!item.abnormalId){
        this.isModalShow = true
        this.modalContent = '找不到异常记录！'
        return
      }
      this.$tab.navigateTo('/pages/work/handle-error?abnormalId=' + item.abnormalId + '&fromCheckedHistory=' + this.fromCheckedHistory)
    },
    standardListItemValue(item) {
      if (item.type == 0 || item.type == 1) {
        return  item.result ? item.result : '-'
      }else{
        return  item.value || item.value==0 ? parseFloat(item.value) + (item.unit ? item.unit : '') : '-'
      }
    },
    // 点击预览
    previewImage(url, index) {
      const urls = url.map(item => {
        return item.url
      })
      uni.previewImage({
        urls, //需要预览的图片链接列表
        current: index,
        indicator: "none", //图片指示器样式 "default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器
      });
    },
  }
}
</script>

<style lang="scss">
page{
  background-color: #fff;
}
</style>
<style lang="scss" scoped>
.resultArrayItem > text:not(:last-child):after{
  content: ',';
}
</style>
